<template>
  <div class="detail">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="width: 400px; margin: 50px auto"
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveProfile">更新</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <user-info></user-info>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <job-info>></job-info>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserBaseInfo, updateBaseInfo } from "@/api/employees";
import userInfo from "./components/user-info.vue";
import jobInfo from "./components/job-info.vue";
export default {
  name: "detail",
  data() {
    return {
      //tba栏的切换默认显示
      activeName: "first",
      //表单数据
      ruleForm: {},
      //表单规则验证
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    async getBaseInfo() {
      let res = await getUserBaseInfo(this.$route.query.id);
      //   console.log(res);
      this.ruleForm = res.data;
    },
    async saveProfile() {
      await updateBaseInfo(this.ruleForm);
      this.$message.success("修改成功");
    },
  },
  created() {
    this.getBaseInfo();
  },
  components: {
    userInfo,
    jobInfo,
  },
};
</script>

<style lang='scss'>
.el-card {
  margin: 20px;
}
</style>